<!--
# Copyright 2015 The Swarming Authors. All rights reserved.
# Use of this source code is governed by the Apache v2.0 license that can be
# found in the LICENSE file.

-->

<!--
@group Swarming Elements

`stats-table-chart' encapsulates a 'google-chart' of table type.
This element exposes a 'data' attribute which is JSON serialized
`google.visualization.DataTable` object and a `resolution` attribute that is
'minutes', 'hours', or 'days'.

Example:
  <stats-table-chart data="{{data_table}}"></stats-table-chart>

@element stats-table-chart
-->

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/google-apis/google-jsapi.html">

<polymer-element name="stats-table-chart" attributes="data">
  <template>
    <div id="chart">(Loading...)</div>
    <google-jsapi on-api-load="{{readyForAction}}"></google-jsapi>
  </template>
  <script>
  Polymer('stats-table-chart', {
    observe: {
      'data': 'loadData'
    },

    readyForAction: function() {
      google.load("visualization", "1", {
        packages: ['table'],
        callback: function() {
          this.isReady = true;
          this.loadData();
        }.bind(this)
      });
    },

    loadData: function() {
      if (this.data && this.isReady) {
        if (!this.table) {
          this.table = new google.visualization.Table(this.$.chart);
        }
        this.table.draw(new google.visualization.DataTable(this.data));
      }
    }
  });
  </script>
</polymer-element>